<template>
  <div class="container">
    <h1>
      <span>仿真实验操作</span>
    </h1>
    <div class="imgList clearfix">
      <ul class="mui-table-view mui-grid-view mui-grid-9 clearfix">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/simulation/firstperson">
            <span class="mui-icon iconfont icon-wenjian1"></span>
            <div style="margin-top:12px;">
              <p class="first">视图导航模块</p>
              <p>实验步骤1：模型的旋转平移缩放</p>
              <p>功能描述：通过鼠标来控制三维地层模型的旋转、平移、放大和缩小</p>
            </div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/simulation/gtp">
            <span class="mui-icon mui-icon-map"></span>
            <div style="margin-top:12px;">
              <p class="first">视图导航模块</p>
              <p>实验步骤2：视点控制</p>
              <p>功能描述：实现模型的俯视、平视和斜视间的转换</p>
            </div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/simulation/firstperson">
            <span class="mui-icon iconfont icon-shezhi"></span>
            <div style="margin-top:12px;">
              <p class="first">视图导航模块</p>
              <p>实验步骤3：第一人称视角</p>
              <p>功能描述：以第一人称视角浏览整个地层模型</p>
            </div>
          </router-link>
        </li>
        <li style="margin-right:0;" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/simulation/section">
            <span class="mui-icon iconfont icon-kongjianchaxun"></span>
            <div style="margin-top:12px;">
              <p class="first">模型展示模块</p>
              <p>实验步骤4：地层模型载入</p>
              <p>功能描述：前端浏览器载入并展示三维地层模型</p>
            </div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/simulation/gtp">
            <span class="mui-icon iconfont icon-sanwei2"></span>
            <div style="margin-top:12px;">
              <p class="first">模型展示模块</p>
              <p>实验步骤5：拔高系数</p>
              <p>功能描述：控制三维地层模型的高度变化</p>
            </div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/simulation/gtp">
            <span class="mui-icon iconfont icon-icon-sanweifenxi"></span>
            <div style="margin-top:12px;">
              <p class="first">模型展示模块</p>
              <p>实验步骤6：分层展示</p>
              <p>功能描述：展示不同地层数的地层模型</p>
            </div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/simulation/gtp">
            <span class=" mui-icon iconfont icon-panbiefenxi"></span>
            <div style="margin-top:12px;">
              <p class="first">模型展示模块</p>
              <p>实验步骤7：分类展示</p>
              <p>功能描述：展示不同土地类型的地层模型</p>
            </div>
          </router-link>
        </li>
        <li style="margin-right:0;" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/simulation/firstperson">
            <span class="mui-icon iconfont icon-qiekuai"></span>
            <div style="margin-top:12px;">
              <p class="first">模型展示模块</p>
              <p>实验步骤8：岩性着色</p>
              <p>功能描述：改变各种土地类型的模型颜色</p> 
            </div>
          </router-link>
        </li>
        <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <router-link to="/simulation/gtp">
            <span class="mui-icon iconfont icon-liangsuanfenxi "></span>
            <div style="margin-top:12px;">
              <p class="first">查询量算模块</p>
              <p>实验步骤9：岩性查询</p>
              <p>功能描述：查询地层模型的岩性信息和地层信息</p>
            </div>
          </router-link>
        </li>
        <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <router-link to="/simulation/gtp">
            <span class="mui-icon iconfont icon-juliliangsuan"></span>
            <div style="margin-top:12px;">
              <p class="first">查询量算模块</p>
              <p>实验步骤10：空间距离量算</p>
              <p>功能描述：在地层模型上绘制线段并计算线段的空间距离</p>
            </div>
          </router-link>
        </li>
        <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <router-link  to="/simulation/zk">
            <span class="mui-icon iconfont icon-zuankong"></span>
            <div style="margin-top:12px;">
              <p class="first">地层三维分析模块</p>
              <p>实验步骤11：虚拟钻孔</p>
              <p>功能描述：在模型表面选取一点作为钻孔点，生成此钻孔点的钻孔模型</p>
            </div>
          </router-link>
        </li>
        <li
          style="margin-right:0;margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <router-link to="/simulation/section">
            <span class=" mui-icon iconfont icon-sanwei1"></span>
            <div style="margin-top:12px;">
              <p class="first">地层三维分析模块</p>
              <p>实验步骤12：地层剖面</p>
              <p>功能描述：生成地层模型的剖面。</p>
            </div>
          </router-link>
        </li>
         <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <router-link to="/simulation/layercut">
            <span class="mui-icon iconfont icon-queryretrieval"></span>
            <div style="margin-top:12px;">
              <p class="first">地层三维分析模块</p>
              <p>实验步骤13：地层剖切</p>
              <p>功能描述：将地层模型进行剖切，获取地层切块。</p>
            </div>
          </router-link>
        </li>
         <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <router-link to="/aboutUs">
            <span class="mui-icon iconfont icon-baogao"></span>
            <div style="margin-top:12px;">
              <p class="first">查询量算模块</p>
              <p>实验步骤14：生成实验报告</p>
              <p>功能描述：实验操作步骤完成后自动生成实验报告</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  margin: 10px 0 95px;
  box-sizing: border-box;
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
  .clearfix {
    *zoom: 1;
  }
  h1 {
    width: 1123px;
    height: 48px;
    line-height: 48px;
    font-size: 20px;
    font-weight: normal;
    border-bottom: 2px solid #d7d7d5;
    margin: 0 auto 30px;
    position: relative;
    span {
      position: absolute;
      left: 0;
      top: -2px;
      border-bottom: 2px solid #2fb7a1;
      color: #323335;
      font-weight: normal;
    }
  }
  .imgList {
    width: 1123px;
    margin: 0 auto;
    ul {
      margin: 30px 0 0 0;
      padding: 0;
      li {
        width: 230px;
        height: 295px;
        list-style: none;
        background: rgba(239, 239, 239, 0.1);
        box-shadow: 0 0 5px #ccc;
        float: left;
        margin-right: 6%;
        margin-bottom: 60px;
        a {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          div {
            .first {
              color: #333;
            }
            p {
              margin: 5px 0;
              font-size: 12px;
              color: #999;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
      li:hover {
        background-color: #2fb7a1;
      }
      li:hover a {
        color: #fff;
        border: 1px solid #fff;
      }
      li:hover a p {
        color: #fff;
      }
    }
    .mui-grid-view.mui-grid-9 {
      border: none;
      background-color: #fff;
    }
    .mui-grid-view.mui-grid-9 .mui-media .mui-icon {
      font-size: 4.4em;
      top: 40px;
    }
  }
}
</style>